<template>
  <view>
    <view class="grace-padding grace-bg-white  grace-common-border">
      <view class="grace-form">
        <form @submit="formSubmit">
          <view class="grace-items">
            <view class="grace-label">国家和地区</view>
            <view class="grace-form-r">
              <picker
                @change="bindPickerChange"
                :value="genderIndex"
                :range="gender"
                name="gender"
              >
                <text>{{gender[genderIndex]}}</text>
              </picker>
            </view>
          </view>
          <view class="grace-items">
            <view class="grace-label">+54</view>
            <input
              type="text"
              class="input"
              name="tel"
              placeholder="请输入手机号"
            >
            <text></text>
          </view>
        </form>

      </view>
    </view>
    <view style="margin:22upx 0;">
      <button
        formType="submit"
        type="primary"
        style="width:100%;"
      >下一步</button>
    </view>
    <view class="rule"> <text>一个手机号只能做为一个账号的登录名</text></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      genderIndex: 0,
      gender: ["阿根廷", "中国"]
    };
  },
  methods: {
    bindPickerChange: function(e) {
      console.log(e);
      this.genderIndex = e.detail.value;
    },
    bindDateChange: function(e) {
      this.dateValue = e.detail.value;
    },
    formSubmit: function(e) {
      wx.showToast({ title: "请观察控制台", icon: "none" });
      console.log(JSON.stringify(e.detail.value));
    }
  }
};
</script>
<style lang="scss" scoped>
.grace-padding {
  padding: 0;
  width: 100%;
}
.grace-form .grace-items {
  padding: 0;
}
button {
  width: 690upx;
  height: 88upx;
  background: rgba(221, 221, 221, 1);
  border-radius: 5upx;
}
.grace-form .grace-items .grace-label {
  width: 160upx;
  font-size: 32upx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.grace-form .grace-items {
  padding: 0 3%;
  width: 94%;
}
.rule {
  margin-top: 28upx;
  width: 100%;
  text-align: center;
  text {
    font-size: 28upx;
    font-weight: 400;
    color: rgba(184, 184, 184, 1);
    text-align: center;
  }
}
</style>